package myJs.search

import myJs.Implicits._
import myJs.cps.BootstrapTableCp.Column
import myJs.cps._
import myJs.search.circDetail.CircDetail
import myJs.search.detail.Detail
import myJs.tool.Pojo._
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.web.html._

import scala.collection.immutable.SeqMap

/**
 * Created by yz on 21/1/2022
 */
@react object CircTableCp {

  case class Props(tableRs: List[ujson.Obj])

  val component = FunctionalComponent[Props] { props =>

    val (columns, setColumns) = useState(List.empty[Column])


    object FTool {

      def refreshColumns = () => {
        val curDatas = props.tableRs
        val map = SeqMap(
          "circId" -> "circID",
          "circBase" -> "circBase ID",
          "species" -> "Species",
          "position" -> "Position",
          "strand" -> "Strand",
          "geneSymbol" -> "Gene Symbol",
          "geneType" -> "Gene Type",
          "allMean" -> "All Mean",
          "allFreq" -> "All Freq",
          "fetalMean" -> "Fetal Mean",
          "fetalFreq" -> "Fetal Freq",
          "normalMean" -> "Normal Mean",
          "normalFreq" -> "Normal Freq",
          "nafldMean" -> "NAFLD Mean",
          "nafldFreq" -> "NAFLD Freq",
          "aldMean" -> "ALD Mean",
          "aldFreq" -> "ALD Freq",
          "vhMean" -> "Viral Hepatitis Mean",
          "vhFreq" -> "Viral Hepatitis Freq",
          "fibrosisMean" -> "Fibrosis Mean",
          "fibrosisFreq" -> "Fibrosis Freq",
          "cirrhosisMean" -> "Cirrhosis Mean",
          "cirrhosisFreq" -> "Cirrhosis Freq",
          "dnMean" -> "Dysplastic Nodule Mean",
          "dnFreq" -> "Dysplastic Nodule Freq",
          "hccMean" -> "HCC Mean",
          "hccFreq" -> "HCC Freq",
          "mixedMean" -> "Mixed HCC-ICC Mean",
          "mixedFreq" -> "Mixed HCC-ICC Freq",
          "iccMean" -> "ICC Mean",
          "iccFreq" -> "ICC Freq",
          "hbMean" -> "HB Mean",
          "hbFreq" -> "HB Freq",
        )
        val basicColumns = map.map { case (k, v) =>
          val searchKind = k match {
            case x if (x.endsWith("Median") || x.endsWith("Freq")) => DoubleSearch
            case x if List("species", "geneType").contains(x) => CheckboxSearch
            case _ => TextSearch
          }
          val title = v match {
            case _ => v
          }
          val operable = k match {
            case _ => true
          }
          val fmt = FTool.tbFmt(k)
          val comVF = FTool.comVFmt(v)
          val optionMap = searchKind match {
            case CheckboxSearch => curDatas.map { dict =>
              dict(k).str
            }.distinct.optionMap
            case _ => SeqMap[String, String]()
          }
          Column(field = k, title = title, operable = operable, searchKind = searchKind, formatter = fmt,
            comVF = comVF, optionMap = optionMap)
        }.toList
        setColumns(basicColumns)
      }

      def tbFmt(field: String) = (v: ujson.Value, row: ujson.Obj) => {
        field match {
          case "geneSymbol" =>
            val url = s"#${Detail.absolutePath}"
            a(target := "_blank", href := s"${url}?geneName=${v.str}&species=${row("species").str}", s"${v.str}")()
          case "circBase" =>
            val url = s"http://www.circbase.org/cgi-bin/singlerecord.cgi?id=${v.str}"
            a(target := "_blank", href := s"${url}", s"${v.str}")()
          case "circId" =>
            val url = s"${CircDetail.absolutePath}"
            a(target := "_blank", href := s"${url}?circId=${v.str}&species=${row("species").str}", s"${v.str}")()
          case _ => span(v.myStr)()
        }
      }

      def comVFmt(fileTitle: String) = (v: ujson.Value, row: ujson.Obj) => {
        fileTitle match {
          case _ => v.myStr
        }
      }

    }

    useEffect(() => {
      FTool.refreshColumns()
    }, List(props.tableRs)
    )

    div(
      div(style := Style(),
        BootstrapTableCp(columns = columns, datas = props.tableRs, pageList = List(10, 25, 50), pageSize = 10,
          selectColumnEnabled = true)
      ),
    )


  }

  object STool {

  }

}
